<template>
	<view class="user-view">
		<view class="top-bar"><uni-navbar :fixed="true" :back="true" color="#fff" title="修改头像"></uni-navbar></view>

		<view class="sub-box" v-if="userInfo.Authorization"><image class="sub-img" :src="$imagePreview(userInfo.imagePath)" mode="aspectFill"></image></view>

		<view class="form-box">
			<u-form-item class="form-item" label="上传图片">
				<uni-file-upload style="width: 500rpx" type="image" :limit="1"></uni-file-upload>
			</u-form-item>
		</view>

		<view class="fiexd-btm">
			<view class="fiexd-line">该照片将同步应用于人脸识别登录和会议无感签到等场景，请务必拍摄/上传个人清晰免冠正面人脸照片！</view>
			<u-button class="form-btn" type="error" @click="confirm">保存</u-button>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import uniFileUpload from '@/components/uni-file-uploader.vue';
export default {
	components: {
		uniFileUpload
	},
	data() {
		return {
			src: '',
			imgFileList: []
		};
	},
	onLoad() {
		this.loadLogin();
	},
	onUnload() {
		this.$store.commit('filePush', []);
	},
	computed: {
		...mapState(['userInfo', 'fileList'])
	},
	methods: {
		loadLogin() {
			if (this.userInfo.Authorization) {
			} else {
				this.$logout();
			}
		},
		confirm() {
			if (this.userInfo.roleCodes.indexOf('sys_manager') != -1) {
				this.$msg('管理员不能修改个人信息！');
				return false;
			}
			console.log(this.fileList);
			if (this.fileList.length == 0) {
				this.$msg('请上传头像！');
				return false;
			} else {
				let data = {};
				data = {
					userInfo: {
						id: this.userInfo.userInfo.id,
						sysUserId: this.userInfo.sysUser.id,
						userName: this.userInfo.sysUser.userName,
						remark1: this.fileList[0].path
					}
				};
				this.$request('/system/user-info/add', data, {
					load: true
				}).then((res) => {
					this.$msg(res.msg);
					this.userInfo.imagePath = 'userinfo' + '\\' + this.fileList[0].path;
					this.$store.commit('login', this.userInfo);
					this.disabled = true;
					setTimeout(() => {
						let pre = this.$prePage();
						if (pre && pre.loadData) {
							pre.loadData('refresh');
						}
						uni.navigateBack();
					}, 500);
				});
			}
		}
	}
};
</script>

<style lang="scss">
.user-view {
	background-color: #fff;
}

.sub-box {
	padding: 20rpx 30rpx;
	border-bottom: 20rpx solid $u-border-color;

	.sub-img {
		margin: 0 auto;
		width: 400rpx;
		height: 400rpx;
	}
}

.form-box {
	.form-item {
		@include mp-flex;
		border-bottom: 20rpx solid $u-border-color;
	}

	.input-src {
		display: flex;
	}

	.form-img {
		width: 120rpx;
		margin-right: 16rpx;
	}

	.uploader-add {
		display: flex;
		align-items: center;
		width: 120rpx;
		height: 120rpx;
		overflow: hidden;
		vertical-align: top;
		background: #fff url('~@/static/img/add.png') no-repeat center center;
		background-size: 120rpx;
		input {
			width: 100%;
			height: 100%;
		}
	}
}

.fiexd-btm {
	position: static;
	padding: 30rpx;
}
</style>
